<template>
<div class="bottom">
  <div class="bottom-item"  v-for='item of items' :key='item.index'  @click="selected(item.push,item.cls)">
    <img :src="item.iconSelect" v-if="select==item.cls" alt="">
    <img :src="item.icon" v-else alt="">
    <font>{{item.name}}</font>
  </div>
</div>
</template>
<script>
export default {
  name: "bottom",
  data() {
    return {
      select: this.toSelected,
      items: [
        {
          cls: "home",
          name: "活动首页",
          push: "/",
          icon: "http://sucai.suoluomei.cn/sucai_zs/images/home.png",
          iconSelect: "http://sucai.suoluomei.cn/sucai_zs/images/home_select.png"
        },
        {
          cls: "List",
          name: "榜单",
          push: "/List",
          icon: "http://sucai.suoluomei.cn/sucai_zs/images/rank.png",
          iconSelect: "http://sucai.suoluomei.cn/sucai_zs/images/rank_select.png"
        },
        {
          cls: "mine",
          name: this.newText ? this.newText :"我的",
          push: "/mine",
          icon: "http://sucai.suoluomei.cn/sucai_zs/images/applys.png",
          iconSelect: "http://sucai.suoluomei.cn/sucai_zs/images/applys_select.png"
        }
      ]
    };
  },
  props: {
    toSelected: String,
    newText: String
  },
  created: function () {
    // console.log(this.newText)
  },
  methods: {
    selected: function(rounter, cls) {
      this.$router.push({ path: rounter });
      if (cls == "home") {
        this.select = "home";
      } else if (cls == "List") {
        this.select = "List";
      } else {
        this.select = "mine";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  display: inline-flex;
  justify-content: space-around;
  width: 100%;
  height: 3.5rem;
  background-color: #fff;
  border-top: 0.1rem solid #ccc;
  z-index: 2000;
  .bottom-item {
    padding-top: 0.2rem;
    width: 5rem;
    height: 3.5rem;
    img {
      margin-top: 0.1rem;
      width: 1.5rem;
      height: 1.5rem;
    }
    font {
      display: block;
      width: 100%;
      color: #c6c6c6;
      font-size: 0.8rem;
    }
  }
}
</style>
